<template>
    <div style="height: 100%">
        <el-table :data="tableData"
            style="width: 100%"
            height="calc(100% - 38px)">
            <el-table-column width="100" prop="id" label="用户编码" />
            <el-table-column width="160" prop="state" label="状态">
                <template v-slot="scope">
                    <div v-if="scope.row.id === inputcon.id" >
                        <span v-if="edit">{{scope.row.state}}</span>
                        <el-input v-else v-model="scope.row.state"></el-input>
                    </div>
                    <div v-else>{{scope.row.state}}</div>
                </template>
            </el-table-column>    
            <el-table-column width="120" prop="name" label="用户姓名" >
                 <template v-slot="scope">
                    <div v-if="scope.row.id === inputcon.id">
                        <span v-if="edit">{{scope.row.name}}</span>
                        <el-input v-else v-model="scope.row.name"></el-input>
                    </div>
                    <div v-else>{{scope.row.name}}</div>
                </template>
            </el-table-column>
            <el-table-column width="160" prop="sex" label="性别">
                <template v-slot="scope">
                    <div v-if="scope.row.id === inputcon.id">
                        <span v-if="edit">{{scope.row.sex}}</span>
                        <el-input v-else v-model="scope.row.sex"></el-input>
                    </div>
                    <div v-else>{{scope.row.sex}}</div>
                </template>
            </el-table-column>
            <el-table-column width="100" prop="dept" label="所属部门">
                <template v-slot="scope">
                    <div v-if="scope.row.id === inputcon.id">
                        <span v-if="edit">{{scope.row.dept}}</span>
                        <el-input v-else v-model="scope.row.dept"></el-input>
                    </div>
                    <div v-else>{{scope.row.dept}}</div>
                </template>
            </el-table-column>
            <el-table-column width="120" prop="position" label="职位">
                <template v-slot="scope">
                    <div v-if="scope.row.id === inputcon.id">
                        <span v-if="edit">{{scope.row.position}}</span>
                        <el-input v-else v-model="scope.row.position"></el-input>
                    </div>
                    <div v-else>{{scope.row.position}}</div>
                </template>
            </el-table-column>
            <el-table-column width="160" prop="birthday" label="生日">
                <template v-slot="scope">
                    <div v-if="scope.row.id === inputcon.id">
                        <span v-if="edit">{{scope.row.birthday}}</span>
                        <el-input v-else v-model="scope.row.birthday"></el-input>
                    </div>
                    <div v-else>{{scope.row.birthday}}</div>
                </template>
            </el-table-column>
            <el-table-column width="160" prop="induction" label="入职日期">
                <template v-slot="scope">
                    <div v-if="scope.row.id === inputcon.id">
                        <span v-if="edit">{{scope.row.induction}}</span>
                        <el-input v-else v-model="scope.row.induction"></el-input>
                    </div>
                    <div v-else>{{scope.row.induction}}</div>
                </template>
            </el-table-column>
            <el-table-column width="120" prop="phone" label="电话号码"/>

            <el-table-column width="300" prop="email" label="用户住址">
                <template v-slot="scope">
                    <div v-if="scope.row.id === inputcon.id">
                        <span v-if="edit">{{scope.row.address}}</span>
                        <el-input v-else v-model="scope.row.address"></el-input>
                    </div>
                    <div v-else>{{scope.row.address}}</div>
                </template>
            </el-table-column>
             <el-table-column width="300" prop="email" label="用户权限" >
                <template v-slot="scope">
                    <div v-if="scope.row.id === inputcon.id">
                        <span v-if="edit">{{scope.row.role}}</span>
                        <el-input v-else v-model="scope.row.role"></el-input>
                    </div>
                    <div v-else>{{scope.row.role}}</div>
                </template>
            </el-table-column>
            <el-table-column width="200" prop="remark" label="备注" >
                <template v-slot="scope">
                    <div v-if="scope.row.id === inputcon.id">
                        <span v-if="edit">{{scope.row.remark}}</span>
                        <el-input v-else v-model="scope.row.remark"></el-input>
                    </div>
                    <div v-else>{{scope.row.remark}}</div>
                </template>
            </el-table-column>
            <el-table-column fixed="right"
                label="操作"
                width="100">
                <template v-slot="scope">
                    <div v-if="scope.row.id == inputcon.id">
                        <div v-if="edit">
                            <el-button type="text" @click="editEvt(scope)" size="small">编辑</el-button>
                            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="removeEvt(scope)">
                                <el-button type="text" size="small" slot="reference"  >删除</el-button>
                            </el-popconfirm>
                            <!-- <el-button type="text" @click="addEvt(scope)" size="small">新增</el-button> -->
                        </div>
                        <div v-else>
                            <el-button type="text" @click="saveEvt(scope)" size="small">保存</el-button>
                            <el-button type="text" @click="quxiaoEvt(scope)" size="small">取消</el-button>
                        </div>
                    </div>
                    <div v-else>
                         <div>
                            <el-button type="text" @click="editEvt(scope)" size="small">编辑</el-button>
                            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="removeEvt(scope)">
                                <el-button type="text" size="small" slot="reference"  >删除</el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"/>
    </div>
</template>

<script>					
    import { userListApi } from '../../apis/loginApi'
    import { roleupdateApi,deleteApi } from '../../apis/roleApi'
    export default {
        data() {
            return {
                tableData: [],
                total: 0,
                page: 1,
                size: 20,
                timer: null,
                inputcon:{},
                edit:true,
            }
        },
        created() {
            this.getList()
        },
        methods: {
            handleCurrentChange(_page) {
                console.log('------------------------- handleCurrentChange', _page, this.page)
                this.page = _page
                if (!!this.timer) clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    this.getList()
                }, 250)
            },
            handleSizeChange(_size) {
                console.log('------------------------- handleSizeChange', _size, this.size)
                this.size = _size
                if (!!this.timer) clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    this.getList()
                }, 250)
            },
            getList() {
                userListApi({page: this.page, size: this.size}).then(d => {
                    if (d.code === 200) {
                        this.tableData = d.data.rows
                        this.total = d.data.count
                    }
                })
            },
            removeEvt(scope){
                deleteApi("ROLE-1657758885944").then(item=>{
                    console.log(scope.row.id,'22222222')
                    console.log(item)
                })
            },
            editEvt(scope) {
                this.inputcon = scope.row
                console.log(scope.row)
                this.edit = !this.edit
            },
            saveEvt(scope){
                roleupdateApi({
                    id:"ROLE-1657758885944",
                    name:"喵喵队4",
                    right:scope.row.role,
                    remark:scope.row.remark
                }).then(item=>{
                    if(item.code===200){
                        console.log(2)  
                    }
                    console.log(item)
                    this.edit = !this.edit
                })
                
            },
            quxiaoEvt(scope){
                this.edit = !this.edit
            }
        }
    }
</script>









